import React from "react";
import { NavLink } from "react-router-dom";
import { FooterFixed, FooterItem, FooterContent } from "./style";

interface P {
  atthis?: String;
}

export default class Footer extends React.PureComponent<P, {}> {
  render() {
    return (
      <div>
        <FooterFixed>
          <FooterContent>
            <FooterItem>
              <NavLink
                exact
                to="/"
                className={this.props.atthis === "home" ? "atthis" : ""}
              >
                <i className="iconfont">&#xe619;</i>
                首页
              </NavLink>
            </FooterItem>
            <FooterItem>
              <NavLink
                exact
                to="/clock"
                className={this.props.atthis === "clock" ? "atthis" : ""}
              >
                <i className="iconfont">&#xe604;</i>
                打卡
              </NavLink>
            </FooterItem>
            <FooterItem>
              <NavLink
                exact
                to="/learn"
                className={this.props.atthis === "learn" ? "atthis" : ""}
              >
                <i className="iconfont">&#xe7f1;</i>
                学习
              </NavLink>
            </FooterItem>
            <FooterItem>
              <NavLink
                exact
                to="/me"
                className={this.props.atthis === "me" ? "atthis" : ""}
              >
                <i className="iconfont">&#xe600;</i>
                我的
              </NavLink>
            </FooterItem>
          </FooterContent>
        </FooterFixed>
      </div>
    );
  }
}
